<script setup lang="ts">
import {ElMessage, FormInstance} from 'element-plus'
import {reactive, ref} from "vue";
import {useUserStore} from "@/stores/userStore";
import {authUtilStore} from "@/utils/authStore";

const authStore = authUtilStore();
const userStore = useUserStore()
const errorMessage = ref('');
const registerFormRef = ref<FormInstance>();
const registerForm = reactive({
  account: '',
  password: '',
  confirmPassword: '',
  phone: '',
  email: '',
});
const rules = {
  account: [
    {required: true, message: '请输入账号', trigger: 'blur'},
    {min: 6, max: 10, message: '账号长度必须为6到10个字符', trigger: 'blur'},
    {pattern: /^[a-zA-Z][a-zA-Z0-9]{5,9}$/, message: '账号以字母开头且只能是字母和数字', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 10, message: '密码长度必须为6到10个字符', trigger: 'blur'},
    {pattern: /^[A-Z][a-zA-Z0-9]{5,9}$/, message: '密码以大写字母开头且只能是字母和数字', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请确认密码', trigger: 'blur'},
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value !== registerForm.password) {
          callback('两次输入的密码不一致!');
        } else {
          callback();
        }
      }, trigger: 'blur'
    },
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'},
  ],
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱', trigger: 'blur'},
  ],
};
const showMessage = (type: any, message: any) => {// 显示消息提示
  ElMessage({
    type,
    message,
    duration: 1000,
  });
};
// 重置表单
const resetForm = () => {
  errorMessage.value = '';
  registerForm.account = '';
  registerForm.password = '';
  registerFormRef.value?.resetFields();
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        // 注册接口调用
        await userStore.register({
          account: registerForm.account,
          password: registerForm.password,
          telphone: registerForm.phone,
          email: registerForm.email,
        });
        authStore.switchToLogin();
        showMessage('success', "注册成功");
        resetForm();
      } catch (error) {
        errorMessage.value = userStore.errorMessage || '登录失败';
        showMessage('error', "注册失败");
      }
    }
  })
}
</script>

<template>
  <div class="register-container">
    <h1>注册</h1>
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    <el-form ref="registerFormRef"
             :model="registerForm"
             :rules="rules"
             size="large"
             scroll-to-error
             hide-required-asterisk>
      <el-form-item prop="account">
        <el-input v-model="registerForm.account" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input type="text" v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input type="text" v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input show-password type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input show-password type="password" v-model="registerForm.confirmPassword"
                  placeholder="请确认密码"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm(registerFormRef)" class="register-btn" size="large">注册</el-button>
  </div>
</template>

<style scoped>
.register-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.register-btn {
  font-size: 18px;
  padding: 10px 70px;
  margin-top: 10px;
}

.error-message {
  color: red;
}
</style>
